<template>
  <view
    class="uni-skeleton"
    :class="[animated ? 'uni-skeleton-animated' : '']"
  >
    <template v-if="loading">
      <slot name="skeleton">
       
        <ul class="uni-skeleton-paragraph">
          <li v-for="item in rows" :key="item">
			   <h3 class="uni-skeleton-title" style="width:30%"></h3>
			    <h3 class="uni-skeleton-title" style="width:45%"></h3>
				<h3 class="uni-skeleton-title" style="width:70%"></h3>
		  </li>
          <li style="width: 61%"></li>
        </ul>
      </slot>
    </template>
    <slot v-else></slot>
  </view>
</template>

<script>
export default {
  name: "uni-skeleton",
  props: {
    rows: {
      type: Number,
      default: 3,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    animated: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.uni-skeleton {
  width: 100%;
}
.uni-skeleton .uni-skeleton-title {
  height: 16px;
  margin-top: 16px;
  background: #f2f2f2;
}
.uni-skeleton .uni-skeleton-paragraph {
  margin: 0;
  padding: 6px 0 0 0;
  margin-left: 5%;
}
.uni-skeleton .uni-skeleton-paragraph > li {
  width: 100%;
  margin: 16px 0 0 0;
  height: 16px;
  list-style: none;
  background: #f2f2f2;
}
.uni-skeleton-animated .uni-skeleton-title {
  background: linear-gradient(90deg, #f2f2f2 25%, #ececec 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: lay-skeleton-loading 1.2s ease infinite;
}
.uni-skeleton-animated .uni-skeleton-paragraph > li {
  background: linear-gradient(90deg, #f2f2f2 25%, #ececec 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: lay-skeleton-loading 1.2s ease infinite;
}
@keyframes lay-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>
